<template>
  <div class="admin-control">
    <div style="position: relative">
      <tab-control :tabs="tabLists" class="tab" :handleClick="handleClick"></tab-control>
      <el-button type="text" class="admin-control-add" @click="dialogFormVisible = true">+ 添加管理员</el-button>
    </div>
    <router-view :changed="num"></router-view>
    <el-dialog title="添加" :visible.sync="dialogFormVisible" class="admin-control-edit">
      <el-form :model="form" label-position="left" :rules="rules" ref="ruleForm">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="admin_name">
          <el-input v-model.trim="form.admin_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="admin_password">
          <el-input v-model.trim="form.admin_password" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="confirm_password">
          <el-input v-model.trim="form.confirm_password" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="所属集团" :label-width="formLabelWidth" prop="depart_id">
          <el-select v-model="form.depart_id" clearable placeholder="请选择所属集团">
            <el-option
              v-for="item in groupList"
              :key="item.value"
              :label="item.depart_name"
              :value="item.depart_id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAdmin">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import tabControl from "@/components/tabs/Tab";
export default {
  name: "group-control",
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.admin_password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      num: 1,
      tabLists: [],
      dialogFormVisible: false, //添加管理员按钮
      groupList: [],
      form: {
        //添加管理员表单
        admin_name: "",
        admin_password: "",
        confirm_password: "",
        depart_id: "",
        depart_level: 1
      },
      formLabelWidth: "80px",
      rules: {
        admin_name: {
          required: true,
          message: "请填写用户名",
          trigger: "blur"
        },
        admin_password: {
          required: true,
          message: "请填写密码",
          trigger: "blur"
        },
        confirm_password: {
          required: true,
          validator: validatePass2,
          trigger: "blur"
        },
        depart_id: {
          required: true,
          message: "请选择集团",
          trigger: "blur"
        }
      }
    };
  },
  components: {
    tabControl
  },
  watch: {
    dialogFormVisible(n, o) {
      if ((n == false, o == true)) {
        this.$refs.ruleForm.resetFields();
      }
    }
  },
  created(){
	  this.tabLists = this.$route.matched.slice(-2,-1)[0].meta.tabs;
  },
  methods: {
    // 顶部导航栏
    handleClick(tab, event) {
      /* this.$router.push({
        path: this.tabLists[0].name
      }); */
    },
    // 请求集团列表
    getGroupList() {
      this.$http
        .post("/admin/depart/index.php?act=departManage&op=firstDeparts", {
          include_selected: 0
        })
        .then(res => {
          if (res.code == 1) {
            this.groupList = res.data;
          }
        });
    },
    // 添加管理员
    addAdmin() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$http
            .post(
              "/admin/depart/index.php?act=departManage&op=addManage",
              this.form
            )
            .then(
              res => {
                if (res.code == 1) {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success"
                  });
                  this.dialogFormVisible = false;
                  this.num++;
                } else {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error"
                  });
                }
              },
              err => {
                this.$message.error("获取数据失败！");
              }
            );
        } else {
          return false;
        }
      });
    }
  },
  mounted() {
    //页面刷新就执行
    /* this.tabLists=[
                {"label":"22","name":"first"},
                {"label":"充值333444dfd日志","name":"second"},
                {"label":"添加经销商","name":"third"},
      ]; */
    this.getGroupList();
  }
};
</script>
<style scoped lang="scss">
.admin-control {
  .admin-control-edit {
    .el-input,
    .el-select {
      width: 60%;
    }
  }
  .admin-control-add {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
